<template>
    <el-container style="height: 100%">
      <el-aside width="270px" >
        <div class="user-block">
          <el-avatar :size="80" v-bind:src="user.imgUrl" style="display: block ;height: 80px;width: 80px;margin: auto" >
            <img src="../assets/img/login/photo_80.jpg"/>
          </el-avatar>
          <p class="username">{{user.name}}</p>
        </div>
        <el-menu router active-text-color="	#00BFFF" v-bind:default-active="selectUrl"
                 background-color="#FFFFFF" @select="(data1,data2)=>setIndexMenu(data1)"
        >
        <el-menu-item v-for="(item,index) in root" :key="index" v-bind:index="item.path" >
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="62px" >
        <HomeHead
            :name="user.name"
            :img-url="user.imgUrl"
            :index-menu="selectName"
        ></HomeHead>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

</template>

<script >
import HomeHead from "@/components/home/HomeHead";
export default {
  name: "Home",
  components: {HomeHead},
  data(){
    return{
      selectName:'课程列表',
      selectUrl:'/classList',
      user:{
        id:'',
        name:'',
        imgUrl:'',
        type:'',
      },
      root:[]
    }
  },
  methods:{
    setIndexMenu(Index1){
     var i=0;
     for(;i<this.root.length;i++){
       if(this.root[i].path===Index1)
          break;
     }
     this.selectName=this.root[i].name
    },
    getRootList(){
      this.$axios.post(
          '/userRoot',
          {type:this.Cookies.get('userType')}
      ).then(resp=>{
        this.root=resp.data;
        console.log(this.root)
        this.selectUrl=this.$route.path;
        this.setIndexMenu(this.selectUrl);
        if('key' in this.$route.query) {
          this.selectName = this.$route.query.key;
          var i=0;
          for(;i<resp.data.length;i++){
            if(resp.data[i].name===this.selectName)
              break;
          }
          this.selectUrl=resp.data[i].path;
        }

      })
      this.user.id=this.Cookies.get('userId')
      this.user.name=this.Cookies.get('userName')
      this.user.imgUrl=this.Cookies.get('userImgUrl')
      this.user.type=this.Cookies.get('userType')

    }

  },
  mounted() {
    this.getRootList();

  },
  created() {
  },
}
</script>

<style scoped>
.el-header{
  padding: 0;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
  border: 5px solid rgba(175, 90, 90, 0.5);
  background-clip: padding-box;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  padding: 5px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.user-block {
  border-bottom: 1px solid #147acd;
  text-align: center;
  height: 160px;
  width: 80%;
  margin: 20px auto 5px auto;
}

.username {
  color: #2b333b;
  font-size: 14px;
  line-height: 40px;
  margin: 10px auto auto;
}
.el-menu-item{
  height: 70px;
  line-height: 70px;
  font-size: 22px;
  font-family: 隶书;
  color: 	rgb(113,119,125);
}
</style>
